<template>
	<div>
		
		<!-- 具体的内容 -->
		<h3>ToDoList</h3>
		
		<input type="text"  value="" v-model="info"/>  <button @click="appendToDoList">添加</button>
		
		<h5>待处理</h5>
		<ol>
			<li v-for="(item,index) in unDoList"> {{item.info}}       <button @click="item.status=1">√</button>      </li>
		</ol>
		<hr>
		
		
		
		
		<h5>已处理处理</h5>
		<ol>
				<li class="done"  v-for="(item,index) in doneList"> {{item.info}} </li>
		</ol>
		
		
	</div>
	
</template>

<script>
	export default {
		name:'ToDoList',
		data(){
			return  {
				info:'',
				toDoList:[
					{info:'今天学习脚手架',status:0},
					{info:'还得学习axios',status:0},
					{info:'学完了Java基础部分',status:1},
					{info:'学完了JavaWeb部分',status:1},
					{info:'学完了MySQL部分',status:1},
				]
				
			}
		},
		methods:{
			appendToDoList(){
				this.toDoList.push({info:this.info,status:0})
				this.info = ''
			}
		},
		computed:{
			doneList(){
				let doneArr = [];
				this.toDoList.forEach(function(item,index){
					if(item.status == 1){
						doneArr.push(item)
					}
				})
				return doneArr;
			},
			unDoList(){
				let doneArr = [];
				this.toDoList.forEach(function(item,index){
					if(item.status == 0){
						doneArr.push(item)
					}
				})
				return doneArr;
			}
		},
		//在组件呗创建的时候加载数据 初始化
		created() {
			
		}
	}
</script>

<style scoped>
	/* 期望样式旨在当前  组件中生效 */
	.done{
		text-decoration: line-through;
	}
	
</style>
